<template>
	<view class="video">
		<view class="status_bar"></view>
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">{{ videoinfo.name }}</view>
				<text></text>
			</view>
		</view>
		<view class="content">
			<web-view :src="videoUrl" style="width: 100%; height: 300rpx"></web-view>
		</view>
	</view>
</template>

<script>
import { getvdeosList } from '@/services/course.js';
export default {
	data() {
		return {
			videoUrl: '',
			videoinfo:{}
		};
	},
	onLoad(option) {
		if (option.vUrl) {
			this.videoUrl = option.vUrl;
		} else {
			this.getvdeosList(option.rid);
		}
		// #ifdef APP-PLUS
		let height = 0; //定义动态的高度变量
		let statusbar = 0; // 动态状态栏高度
		uni.getSystemInfo({
			// 获取当前设备的具体信息
			success: (sysinfo) => {
				statusbar = sysinfo.statusBarHeight;
				height = sysinfo.windowHeight;
				this.windowHeight = sysinfo.windowHeight;
			}
		});
		let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
		setTimeout(function () {
			console.log('进来了');
			var wv = currentWebview.children()[0];
			wv.setStyle({
				//设置web-view距离顶部的距离以及自己的高度，单位为px
				top: 85, //此处是距离顶部的高度，应该是你页面的头部
				height: 300, //webview的高度
				videoFullscreen: 'landscape',
				scalable: true
			});
			wv.evalJS(`  
			        var metaEl = document.createElement('meta')  
			        metaEl.setAttribute('name','viewport')  
			        metaEl.setAttribute('content','width=device-width,initial-scale=0.5,minimum-scale=0.1,maximum-scale=9')  
			        document.head.appendChild(metaEl)  
			    `);
		}, 200); //如页面初始化调用需要写延迟
		// #endif
	},
	methods: {
		async getvdeosList(id) {
			const res = await getvdeosList(id);
			if (res.code == 200) {
				if (res.rows.length > 0) {
					this.videoinfo=res.rows[0]
					this.videoUrl = res.rows[0]?.url;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error',
						duration: 500
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.video {
	.header {
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		/* 自定义导航栏 */
		.status_title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100.061rpx;
			padding: 0 16px;
			background-color: #ffffff;
		}
		.status_left {
			width: 24px !important;
		}
		.status_center {
			font-size: 17px;
			font-weight: 700;
		}
		.status_right {
			width: 22px;
		}
	}
}
</style>
